import {PureComponent,Fragment} from "react"
import {InputItem} from "antd-mobile"
import {isNull,goToPage} from "../../utils/helper"
export default class MiTextMap extends PureComponent {
	constructor(props){
		super(props);
		this.state = {}
	}
	goMap=(href)=>{
		let {dispatch}=this.props;
		localStorage[MI_APP_CODE+"mapUrl"]=href;
		// goToPage({dispatch,config:{
		// 	url:"/map?"
		// }})
		dispatch({
			type:"global/addModal",
			payload:{
				config:{
					pathname:"/map",
					search:"?",
					_key:"/map?"
				}
			}
		})
	};
	render(){
		let {field,formData,label,align="left",label_width=5,lng_field,lat_field,title_field,tips,label_text_color,label_text_align="left"}=this.props;
		let labelClass="am-input-label am-input-label-"+label_width;
		let href;
		if(!isNull(lng_field)&&!isNull(lat_field)){
			let lng = formData[lng_field],lat=formData[lat_field],title=formData[title_field]
			if(!isNull(lng)&&!isNull(lat)){
				href="https://uri.amap.com/marker?position="+lng+","+lat+"&name="+title+"&src=mypage&coordinate=gaode&callnative=0"
			}
		}
		return (
		<div>
			<div className="am-list-item mi-text">
				<div className="am-list-line">
					<div className={labelClass} style={{textAlign:label_text_align,color:label_text_color}}>
						<span className="am-form-label">{label}</span>
					</div>
					<div className="am-input-control" style={{textAlign:align}} key={Math.random()}>
						{formData[field[0]]}
						{
							href&&<img onClick={()=>this.goMap(href)} style={{width:"18px",height:"18px",marginLeft:"5px"}} src="image/dingwei.svg" alt="" />
						}
					</div>
				</div>
			</div>
			{tips&&<p className="tipsStyle">{tips}</p>}
		</div>
		)
	}
}